// 读100之内的数
<template>
	<view class="content">
		<custom-navigation :title="title"></custom-navigation>
		<view class="hr"></view>
		
		<view class="flex but">
			<button :class="{'but-red-b':type==1}" class="but2" type="primary" @click="selectType(1)">自动播放</button>
			<button :class="{'but-red-b':type==0}"  class="but2"  type="primary" @click="selectType(0)">选读模式</button>
		</view>
		<view class="hr"></view>
		<!-- <view class="flex but">
			<text>选读模式</text>
		</view>
		<view class="hr"></view> -->
		
		<view class="box01">
			<view class="line flex"  v-for="(i) in 10" :key="''+i">
				<view   v-for="(j) in 10" :key="'_'+j">
					<view @click="selectNum((i-1)*10+j)" :class="{'select-bg':((i-1)*10+j)==select, redFont:((i-1)*10+j)%10==0, bg2:((i-1)*10+j)%2==0,}" class=" td flex1"> {{(i-1)*10+j}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavigation from "@/components/custom-navigation/custom-navigation.vue";
	export default {
		components: {
			customNavigation
		},
		data() {
			return {
				title: '100之内的数字',
				type:'0',
				data1:[],
				data1_del:[],
				item:null,
				answer:[],
				errorCount:0,
				showTishi:false,
				select:0,
				// https://mp.weixin.qq.com/s?__biz=MzI0MDYxNjMyMw==&mid=2247548717&idx=7&sn=be463ac00711a8ad4726d868b6a94dd8&chksm=e91a69c1de6de0d71e00e9298071e765e10802be3331dd7f922149ebae33bebbab1a68626d81&scene=27
			}
		},
		watch: {
			type(val){
				if(val==1){
					this.playNextNum();
				} else {

				}
			}
		},
		onLoad() {
			// 操作数据
			this.init();
			// console.error('this.data1:',JSON.stringify(this.data1))
		},
		onReady() {
			// setTimeout(()=> {this.init();}, 3000);
			this.init()
		},
		destroyed () {
			this.type = 0;
			this.select=0;
		},
		methods: {
			selectType(type){
				// this.type==-1
				// clearTimeout(this.tt)
				// this.tt=setTimeout(() => {
					this.type = type;
				// }, 1500);
			},
			
			selectNum(num){
				this.select = num;
				this.play(this.$shuZi(this.select));
			},
			playNextNum(){
				if(this.type==1 && this.select<100){
					this.select++;
					this.play(this.$shuZi(this.select));
					clearTimeout(this.tt)
					this.tt = setTimeout(() => {
						this.playNextNum();
					}, 1500);
				} else {
					this.select = 0;
				}
			},
			play(text){
				// http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=你好啊，听起来好憨啊"
				// https://fanyi.sogou.com/reventondc/synthesis?text=a&speed=1&lang=zh-CHS&from=translateweb&speaker=6
				// new Audio("http://tts.youdao.com/fanyivoice?word=你好，我是你好&le=zh&keyfrom=speaker-target").play();

				new Audio("http://tts.youdao.com/fanyivoice?word="+text+"&le=zh&keyfrom=speaker-target").play();
			},
			init(){
				for (let i = 1; i < 101; i++) {
					this.data1.push(i);
					
				}
			},
			request(val,index){
				if(!this.item.status){
					this.set_status(this.item.key,val,index);
				}
			},
			//设置答案
			set_status(key,val,index){
				// console.error({key,val})
				for (var i = 0; i < this.data1.length; i++) {
					const item = this.data1[i];
					if(key == item.key){
						if(eval(key) == val){
							item.res = val;
							item.status = '正确';
							this.data1_del.push(item);
							this.answer.splice(index,1);
							// this.data1.splice(i,1);
							// i--;
							// continue;
							// setTimeout(()=> {this.next_item()}, 1000);
						} else {
							item.res = val;
							item.status = '错误';
							this.errorCount++;
							// setTimeout(()=> {this.next_item()}, 1000);
						}
					}
				}
			},
			// 获取剩下的随即值
			get_item(){
				let i = parseInt(Math.random()*100000);
				i = i%this.data1.length;
				if(this.data1[i]){
					this.data1[i].res='';
					this.data1[i].status='';
					this.item = this.data1[i];
				}
			},
			// 获取剩下的随即值
			next_item(){
				// if(this.item){
				// 	if(this.item.status == '正确'){
				// 		for (var i = 0; i < this.data1.length; i++) {
				// 			if(this.data1[i].key == this.item.key) {
				// 				if(this.data1[i+1]){
				// 					this.item = this.data1[i+1];
				// 					break;	
				// 				}
				// 			}
				// 		}
				// 	} else {
				// 		this.item.status ='';
				// 		this.item.res ='';
				// 	}
				// } else {
					if(this.answer.length){
						this.item = this.answer[0];
						 this.answer.splice(0,1);
					}
				// }
				
				// this.set_status(this.answer[0],this.answer[0],0)();
			}
		}
	}
</script>

<style>
	.bg2{
		background-color: #ccc;
	}
	.redFont{
		color: red;
	}
	.select-bg{
		background-color: yellowgreen;
	}
	.but{
		width: 100vw;
		justify-content:center;
	}
	.but-red-b{
		border: 2px solid red;
	}
	.td{
		width: 9.5vw;
		font-size: 21px;
		font-weight: 900;
		text-align: center;
		border: 1px solid #8f8f94;
	}
	.box01{
		border: 1px solid #8f8f94;
	}

	.hanzi{
		width: 100%;
		text-align: center;
	}
	.tupian{
	}
	.box{
		width: 90vw;
		display: flex;
		flex-direction: column;
		margin: 30px;
	}
	.line{
		width: 100vw;
		display: flex;
		flex-direction: column;
		line-height: 40px;
		flex-direction: row;
		justify-content:center;
	}
	table{
		margin-left: 10px;
		margin-right: 10px;
	}
	.tcenter{
		text-align: center;
		width: 100%;
		/* border-bottom: 1px solid #8f8f94; */
	}
	.content{
		font-size: 30px;
	}
	.list{
		/* border: 1px solid #8f8f94; */
		width: auto;
		height: 70vh;
		/* display: flex; */
		flex-direction: column;
		flex: 1;
		overflow:scroll;
	}
	.inline1{
		display: inline;
	}
	.inline2{
		display: inline-block;
		width: 48%;
		margin: 3px;
		background-color: bisque;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
